<template>
  <view style="min-height: 100%;background: #F9F9F9;">
    <block v-show="!loading">
      <view v-if="!list.length" style="width: 100%;padding-top: 100upx" class="u-flex flex-center u-flex-col flex-1">
        <image src="https://app.zbzedu.com/static/WaChat/img/v2_qp4ej2.png" style="width: 308upx;height: 256upx"></image>
        <view class="u-font-sm color-666 u-text-center u-p-t-20">暂无地址，快去添加吧</view>
      </view>
      <scroll-view scroll-y v-if="list.length" style="width: 100%;padding-bottom: 220upx" class="flex-1">
        <view class="u-flex bg-fff u-m-b-20 u-p-30" v-if="item.disableFlag !== 0" v-for="item in list">
          <u-radio-group v-model="checkedId" size="44">
            <u-radio active-color="#2A6AAA" :name="item.id" icon-size="40"></u-radio>
          </u-radio-group>
          <view class="u-flex u-flex-col color-999 flex-1" style="align-items: flex-start" @click="checkedId=item.id">
            <view class="u-font-xl u-p-b-15" style="color: #101010">{{item.consignee}} <text class="u-p-l-30">{{item.phone}}</text></view>
            <view>{{item.province}}
              <text class="u-p-l-10">{{item.street || ''}}</text>
              <text class="u-p-l-10">{{item.district || ''}}</text>
              <text class="u-p-l-10">{{item.address || ''}}</text>
            </view>
          </view>
          <navigator :url="`/package/address/add?id=${item.id}`" class="color-999 u-p-30 u-text-right" style="width: 80upx">编辑</navigator>
        </view>
      </scroll-view>
    </block>
    <view class="bottom u-p-20">
      <u-button type="primary" :custom-style="customStyle" shape="circle" @click="sure">确定</u-button>
      <u-button type="primary" :custom-style="customStyle1" shape="circle" @click="toAdd">添加收货地址</u-button>
    </view>
  </view>
</template>

<script>
  import {request} from "../../util/api";
  import {TOAST} from "../../util/util";

  export default {
    data() {
      return {
        list: [],
        customStyle: {
          background: '#1f476d',
          padding: '0 30rpx',
          color: '#fff'
        },
        customStyle1: {
          background: '#fff',
          padding: '0 30rpx',
          color: '#1f476d',
          border: '1px solid #1f476d',
          marginTop: '10px'
        },
        checkedId: '',
        loading: true
      }
    },

    onLoad(option) {
      if (option.id) {
        this.checkedId = option.id
      }
    },

    onUnload() {
      let showAddress = this.list.filter(item => item.id == this.checkedId)
      let pages = getCurrentPages();
      let prevPage = pages[pages.length - 2]
      if (showAddress.length) {
        prevPage.$vm.showAddress = showAddress[0]
      } else {
        prevPage.$vm.showAddress = ''
      }
    },

    onShow() {
      this.getList()
    },

    methods: {
      getList() {
        request({
          url: '/wx/getCompassUserAddressForUser',
          method: 'post'
        }).then(res => {
          this.list = res.data.filter(item => item.disableFlag !== 0)
          this.loading = false
        })
      },

      toAdd() {
        this.$u.route({
          url: "/package/address/add"
        })
      },

      sure() {
        if (!this.checkedId) {
          TOAST('请选择地址！')
          return
        }
        let showAddress = this.list.filter(item => item.id == this.checkedId)
        let pages = getCurrentPages();
        let prevPage = pages[pages.length - 2]
        if (showAddress.length) {
          prevPage.$vm.showAddress = showAddress[0]
        } else {
          prevPage.$vm.showAddress = ''
        }
        uni.navigateBack()
      }
    }
  }
</script>

<style scoped lang="scss">
  .bottom {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #F9F9F9;
  }
</style>
